<template>
	<view>
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay indicator-active-color="#EA4350" class="swiper">
			<block v-for="(item, index) in detail.pics" :key="item.pics_id">
				<swiper-item @click="handleSwiperImage(index)">
					<image :src="item.pics_mid"
					 mode="aspectFill"></image>
				</swiper-item>
			</block>
		</swiper>

		<!-- 商品的信息 -->
		<view class="goods-info">
			<!-- 价格和分享的图标 -->
			<view class="goods-info-top">
				<view class="goods-price">
					￥{{detail.goods_price}}
				</view>
				<view class="goods-action">
					<!-- 两个图标 -->
					
					<view class="iconfont iconfenxiang_2">
						<button open-type="share"></button>
					</view>
					<view class="iconfont iconshoucang"></view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="goods-title">
				{{detail.goods_name}}
			</view>
		</view>

		<!-- 富文本 -->
		<view class="rich-wrapper">
			<view class="rich-title">
				图文详情
			</view>
			<!-- 富文本的内容 -->
			<rich-text :nodes="detail.goods_introduce"></rich-text>
		</view>

		<!-- 定位在底部的固定栏 -->
		<view class="footer">
			<view class="btn-mini">
				<view class="iconfont iconkefu"></view>
				<view>联系客服</view>
				<button open-type="contact"></button>
			</view>
			<navigator url="../shopcart/shopcart" open-type="switchTab" class="btn-mini">
				<view class="iconfont icongouwuche"></view>
				<view>购物车</view>
			</navigator>
			<view class="btn-small" @click="addCart">
				<button>加入购物车</button>
			</view>
			<view class="btn-small">
				<button>立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {}
			}
		},
		onLoad(query) {
			this.getGoodsDetail(query.goodsId)
		},
		onShareAppMessage(res){
			return {
				imageUrl: this.detail.goods_small_logo
			}
		},
		methods:{
			addCart(){
				let goods = uni.getStorageSync('goods') || {}
				if(goods[this.detail.goods_id]){
					goods[this.detail.goods_id].count++
				}else{
					this.detail.count = 1
					this.detail.selected = true
					goods[this.detail.goods_id] = this.detail
				}
				uni.setStorageSync('goods', goods)
				uni.showToast({
					title: '加入购物车成功',
					icon: 'success',
					duration: 2000
				})
			},
			handleSwiperImage(index){
				const urls = this.detail.pics.map(item => item.pics_mid)
				uni.previewImage({
				  current: urls[index], // 当前显示图片的http链接
				  urls // 需要预览的图片http链接列表
				})
			},
			getGoodsDetail(id){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/detail',
					data: {
						goods_id: id
					},
					success: (res) => {
						this.detail = res.data.message
						wx.hideLoading()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		height: 497rpx;
		width: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-info {
		padding: 20rpx 20rpx 50rpx 20rpx;
		border-bottom: 10px #eee solid;

		.goods-info-top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5px;

			.goods-price {
				color: red;
			}
			.goods-action {
				display: flex;
				width: 100rpx;
				
				.iconfont{
					position: relative;
					font-size: 20px;
					color: #999;
					margin-right: 10px;
					button{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}

		.goods-title {
			font-size: 14px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			line-height: 1.8;
		}
	}

	.rich-wrapper {
		padding: 20rpx 0 100rpx 0;

		.rich-title {
			text-align: center;
			font-size: 14px;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 94rpx;
		background-color: #fff;

		.btn-mini {
			width: 20%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			view {
				font-size: 12px;
			}
			.iconfont{
				font-size: 20px;
			}
			button{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}

		.btn-small {
			width: 30%;
			display: flex;
			align-items: center;

			button {
				border-radius: 50px;
				color: #fff;
				background: orange;
				width: 196rpx;
				height: 60rpx;
				font-size: 12px;
				line-height: 60rpx;
				padding: 0;
				border: none;
			}

			&:last-child button {
				background: red;
			}
		}
	}
</style>
